<template>
<div>
 	<div class="bg">
		<HeadBox></HeadBox>
	</div>
	<map-view @mapLoad="mapLoad" :zoom="zoom"></map-view>
	<div class="operation-box">
		<div><i class="el-icon-s-home" @click="handleHome"></i></div>
		<div><i class="el-icon-zoom-in" @click="handleAdd"></i></div>
		<div><i class="el-icon-zoom-out" @click="handleDelete"></i></div>
		<div><i class="el-icon-map-location" @click="handleBack"></i></div>
	</div>
</div>
</template>

<script>
import MapView from '@/components/map-container/index.vue'

export default {
  name: "trajectory-map",
  components: {
	MapView
  },
  data() {
    return {
		marker: null,
		marklist: [],
		page: 1,
		limit: 1000,
		visiblePopover: false,
		day: "14", //（7天或者14天）7或者14，全部（""）
		distance: 3, // 1-8公里 不传全部
		district: '', // 区划
		allDataList: [], // 全市公布场所数据
		zoom: 12, // 地图放大比例
		text: null, // 纯文本标记
		textList: [],
		drawer: false, // 抽屉弹层
		detailInfo: {}, // 点位详情信息
		dayList: [
			{ value: "7", label: "近7天轨迹点" },
			{ value: "14", label: "近14天轨迹点" },
			{ value: "", label: "全部轨迹点" }
		],
		pathList: [], // 轨迹数据
		pointId: "",
		lookLat: null,
		lookLng: null,
    };
  },
  created() {
	this.lookLat = this.$route.query.lat
	this.lookLng = this.$route.query.lng
	this.pointId = this.$route.query.pointId
  },
  mounted() {
  },
  methods: {
	// 初始化地图
    mapLoad(amap) {
      	this.map = amap
		let _this = this
	  	AMap.plugin('AMap.DistrictSearch', function () {
			var district = new AMap.DistrictSearch({
				// 返回行政区边界坐标等具体信息
				extensions: 'all',
				// 设置查询行政区级别为 区 
				level: 'district'
			})

			district.search('李沧区', function(status, result) {
				// 获取朝阳区的边界信息
				var bounds = result.districtList[0].boundaries

				var polygons = []
				if (bounds) {
					for (var i = 0, l = bounds.length; i < l; i++) {
						//生成行政区划polygon
						var polygon = new AMap.Polygon({
							map: _this.map,
							strokeWeight: 1,
							path: bounds[i],
							fillOpacity: 0.4,
							fillColor: '#80d8ff',
							strokeColor: '#0091ea'
						})
						polygons.push(polygon)
					}
				}

				_this.map.add(polygons)
				// 地图自适应
				_this.map.setFitView(polygons); // 视口自适应
			})
		})

		this.$nextTick(() => {
			// this.getGj(amap)

			this.getGjDatas()
		})
    },
	getGj(amap) {
		AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

			if (!PathSimplifier.supportCanvas) {
				alert('当前环境不支持 Canvas！');
				return;
			}

			var pathSimplifierIns = new PathSimplifier({
				zIndex: 100,
				//autoSetFitView:false,
				map: amap, // 所属的地图实例

				getPath: function(pathData, pathIndex) {

					return pathData.path;
				},
				getHoverTitle: function(pathData, pathIndex, pointIndex) {

					if (pointIndex >= 0) {
						//point 
						return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
					}

					return pathData.name + '，点数量' + pathData.path.length;
				},
				renderOptions: {

					renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
				}
			});

			window.pathSimplifierIns = pathSimplifierIns;

			//设置数据
			pathSimplifierIns.setData([{
				name: '路线0',
				path: [
					[116.405289, 39.904987],
					[113.964458, 40.54664],
					[111.47836, 41.135964],
					[108.949297, 41.670904],
					[106.380111, 42.149509],
					[103.774185, 42.56996],
					[101.135432, 42.930601],
					[98.46826, 43.229964],
					[95.777529, 43.466798],
					[93.068486, 43.64009],
					[90.34669, 43.749086],
					[87.61792, 43.793308]
				]
			}]);

			//对第一条线路（即索引 0）创建一个巡航器
			var navg1 = pathSimplifierIns.createPathNavigator(0, {
				loop: true, //循环播放
				speed: 1000000 //巡航速度，单位千米/小时
			});

			navg1.start();
		})
	},
	// 获取轨迹点位
	getGjDatas() {
		let _this = this
		this.$get('/pt/queryTrail', {
			// 传参参数名：参数值,如果没有，就不需要传
			patientId: this.pointId
		}).then((res) => {
			const mapPointList = res.data
			
			mapPointList.map((item) => {
				let list = []
				list = [item.lng, item.lat]
				this.pathList.push(list)
			})
			// 	打印调用成功回调
			if (this.marklist) {
				this.map.remove(this.marklist);
				this.marklist = []
			}
						
			for (let i in mapPointList) {
				// 创建marker点位标记
				var icon = new AMap.Icon({
					// 图标尺寸
					size: new AMap.Size(90, 90),
					// 图标的取图地址
					image: 'https://xcdx.nyntcl.com/qz.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(25, 25),
					// 图标取图偏移量
					imageOffset: new AMap.Pixel(0, 0)
				});
				var marker = new AMap.Marker({
					position: new AMap.LngLat(mapPointList[i].lng, mapPointList[i].lat),
					icon: icon,
					offset: new AMap.Pixel(-13, -25)
				});
				
				marker.setLabel({
					offset: new AMap.Pixel(-30, 0), // 设置文本标注偏移量
					content: "<div class='info'>" + mapPointList[i].situs + "</div>", //设置文本标注内容
					direction: 'top' // 设置文本标注方位
				});
				marker.setClickable(true)
				
				this.marklist.push(marker)
			}	
			this.map.add(this.marklist)

			var polyline1 = new AMap.Polyline({
				path: _this.pathList,
				showDir: true,
				isOutline: true, // 线条是否带描边，默认false
				outlineColor: '#ffeeff', // 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
				borderWeight: 1, // 描边的宽度，默认为1
				strokeColor: "#3366FF", // 线条颜色，使用16进制颜色代码赋值。默认值为#006600
				strokeOpacity: 1, // 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
				strokeWeight: 6, // 线条宽度，单位：像素
				strokeStyle: "solid",  // 线样式，实线:solid，虚线:dashed
				// strokeStyle是dashed时有效
				strokeDasharray: [10, 5], // 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效
				lineJoin: 'round', // 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
				lineCap: 'round', // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
				zIndex: 50, // 折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50
				// bubble: true,
			})
			this.map.add(polyline1)
			
			// 轨迹规划
			// AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
			// 	if (!PathSimplifier.supportCanvas) {
			// 		alert('当前环境不支持 Canvas！');
			// 		return;
			// 	}
								
			// 	var pathSimplifierIns = new PathSimplifier({
			// 		zIndex: 1000,
			// 		autoSetFitView: false,
			// 		map: _this.map, // 所属的地图实例
			// 		getPath: function(pathData, pathIndex) {
			// 			return pathData.path;
			// 		},
			// 		getHoverTitle: function(pathData, pathIndex, pointIndex) {
			// 			return null
			// 		},
			// 		renderOptions: {
			// 			renderAllPointsIfNumberBelow: -1 // 绘制路线节点，如不需要可设置为-1
			// 		}
			// 	});
								
			// 	window.pathSimplifierIns = pathSimplifierIns;

			// 	// 设置数据
			// 	pathSimplifierIns.setData([{
			// 		name: '阳性人员运动轨迹',
			// 		path: _this.pathList
			// 	}]);
								
			// 	// 对第一条线路（即索引 0）创建一个巡航器
			// 	var navg1 = pathSimplifierIns.createPathNavigator(0, {
			// 		loop: true, // 循环播放
			// 		speed: 4000, // 巡航速度，单位千米/小时 4000
			// 		pathNavigatorStyle: {
			// 			width: 25,
			// 			height: 25,
			// 			// 使用图片
			// 			content: PathSimplifier.Render.Canvas.getImageContent('./icon-gj.png', onload, onerror),
			// 			strokeStyle: null,
			// 			fillStyle: null,
			// 			// 经过路径的样式
			// 			pathLinePassedStyle: {
			// 				lineWidth: 6,
			// 				strokeStyle: '#00D5FF',
			// 				dirArrowStyle: {
			// 					stepSpace: 10,
			// 					strokeStyle: '#ffffff'
			// 				}
			// 			}
			// 		}
			// 	});
								
			// 	navg1.start();
			// });
	
		})
	},
	// 回到李沧城市脑中枢系统
	handleHome() {
		this.$router.push({
			path: "/hsindex"
		})
	},
	// 地图放大
	handleAdd() {
		this.map.zoomIn()
	},
	// 地图缩小
	handleDelete() {
		this.map.zoomOut()
	},
	// 返回显示地图点位
	handleBack() {
		this.$router.push({
			path: "/yxgj-map"
		})
	},	
  }
};
</script>

<style>
#container-trajectory {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}
.bg {
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
}

.operation-box {
	position: absolute;
	top: 140px;
	left: 20%;
	z-index: 1000;
	width: 230px;
	height: 50px;
	background: rgba(16,30,77,0.4);
	border: 2px solid #5780b4;
	border-radius: 18px;
	display: flex;
	box-shadow: 0 0 15px #4C8FE5;
}
.operation-box div {
	flex: 1;
}
.operation-box i {
	position: relative;
	top: 7px;
	display: inline-block;
	font-size: 32px;
	background: linear-gradient(rgba(255, 255, 255, 0.8) 44%, rgba(68, 123, 235, 0.4) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
}

</style>